<template>
	<div id="app" ref="main">
		<common></common>
		<div class="main-box" ref='mainBox'>
			<router-view></router-view>

		</div>

		<my-tabbar></my-tabbar>
		<div class="goBackTop">
			<el-backtop ref='el-backtop' :bottom='70' :right='20' target=".main-box">
				<i class="el-icon-top" style="color: #ffaf5b;"></i>
			</el-backtop>
		</div>
		<confirm-email></confirm-email>
	</div>
</template>

<script>
	import common from './views/view-common/common.vue'
	import shopdetail from './views/ShopDetail/shopdetail'
	import myFooter from './components/my-footer/my-footer.vue'
	import myTabbar from '@/components/my-tabbar/my-tabbar.vue'
	import confirmEmail from '@/components/confirm-email/confirm-email'
	import queryString from 'querystring'
	export default {
		name: 'app',
		components: {
			common,
			shopdetail,
			myFooter,
			myTabbar,
			confirmEmail
		},
		mounted() {
			console.log('mounted-----------')
			let token = window.localStorage.getItem('token')
			if (token) {
				this.getUserInfo(token)
			}
			const {
				login,
			} = queryString.parse(window.location.search.replace('?', ''))
			if (login) { // 代表是通过Line登录过来的 跳去登录页
				this.$router.push('/login')
				console.log('Line 登录')
			}
		},
		methods: {
			getUserInfo(token) {
				this.$axios({
					url: '/user/siteUser/info',
					headers: {
						'Authorization': 'Bearer ' + token
					}
				}).then(res => {
					console.log(res)
					this.$store.commit('SET_ISLOGIN', true)
					this.$store.commit('SET_USERINFO', res.data)
				}).catch(err => {
					this.$store.commit('SIGN_OUT')
				})
			},
		},
		watch: {
			$route(newVal) {
				if (newVal.query.cId) {
					//判断是否是通过邀请链接进入网站 如果是的话注册的时候就会是邀请人的下级
					console.log(newVal.query.cId)
					this.$store.commit('SET_sourceUserId',newVal.query.cId)
				}
			}
		}
	}
</script>

<style lang='scss'>
	@import url("https://at.alicdn.com/t/font_2463836_zmlvmj1xqh.css");
	@import url("assets/css/init.css");

	#app {
		font-family: Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #2c3e50;
		text-align: left;
		display: flex;
		flex-direction: column;
		height: 100%;

		@media screen and (max-width: 900px) {
			max-width: 100%;
			max-height: 100%;
		}
	}

	.main-box {
		flex: 1;
		min-width: 1400px;
		position: relative;

		overflow-y: scroll;

		/* height: 100%!important; */
		/* overflow: hidden; */
		@media screen and (max-width: 900px) {
			overflow: scroll;
			min-width: auto;
			width: 100%;
			padding-bottom: 2.5rem;
		}
	}

	.goBackTop {
		display: none;

		@media screen and (max-width: 900px) {
			display: block;
		}

	}
</style>
